<template>
	<view class="container">
		<view class="search-box">
			<view class="title">
				<p>中源来</p>
			</view>
			<view class="search_boxer">
				<uni-icons type="search" class="icon" size="28"></uni-icons>
				<input type="text" class="search_input" placeholder="查找家族" @focus="getsearch" v-model="searchValue" />
			</view>

		</view>
		<!-- 轮播图 -->
		<view class="clanImg">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(k,i) in swiperItems" :key='k.id' @click="cardturn(k.id,k.url)">
					<image class="imgr" :src="k.pic" mode="aspectFill"></image>
					<view class="textr">
						{{k.title}}
					</view>
				</swiper-item>

			</swiper>
			<!-- <image class="imgr" :src="m_clanUrl" mode="" lazy-load="true"> </image> -->
		</view>

		<view class="calnCul">
			<view class="CulTitle">
				—— 家族文化 ——
			</view>
			<view class="calnInf">
				<view class="calncard" v-for="(k,i) in calncard" :key='k.id' @click="cardturn(k.id,k.url)">
					<image class="cardImg" :src="k.pic" mode="aspectFill"></image>
					<view class="cardTitle">{{k.title}}</view>
				</view>
			</view>
		</view>
		<view class="Redtravel">
			<view class="CulTitle">
				—— 红色旅行 ——
			</view>
			<view class="redInf" v-for="(k,i) in travelInf" :key='k.id' @click="cardturn(k.id,k.url)">
				<view class="redText">
					{{ k.title}}
				</view>
				<view class="imgMask"></view>
				<image class="redImg" :src="k.pic"></image>

			</view>
		</view>
	</view>

</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useClanStore,
		useSearchStore
	} from '@/store/index.js'

	import {
		onShow,
		onLoad,
		onUnload,
		onHide
	} from "@dcloudio/uni-app"
	import {
		wxCodeCheck,
		loginToBc
	} from '@/apis/login.js'
	const searchValue = ref('');
	const useSearch = useSearchStore();
	const m_clanUrl = '../../static/demo_img/main/clanold.jpg'

	const swiperItems = ref([{
			id: '1',
			pic: '../../static/demo_img/main/card1.jpg',
			url: '/a',
			title: '叶氏祖宅寻亲记'
		},
		{
			id: '1',
			pic: '../../static/demo_img/main/red1.jpg',
			url: '/a',
			title: '天安门的记忆'
		}
	])
	// 家族文化卡片
	let calncard = [{
		id: '1',
		pic: '../../static/demo_img/main/card1.jpg',
		url: '/a',
		title: '家族社交'
	}, {
		id: '2',
		pic: '../../static/demo_img/main/card2.jpg',
		url: '/b',
		title: '家族文书'
	}, {
		id: '3',
		pic: '../../static/demo_img/main/card3.jpg',
		url: '/c',
		title: '家族慈善'
	}]
	// 红色旅游事件
	let travelInf = [{
		id: '1',
		pic: '../../static/demo_img/main/red1.jpg',
		url: '/a',
		title: '穿越岁月之追寻天安门的故事1'
	}, {
		id: '2',
		pic: '../../static/demo_img/main/red2.jpg',
		url: '/b',
		title: '穿越岁月之追寻天安门的故事2'
	}]
	const getsearch = () => {
		console.log(searchValue)
		useSearch.searchInput = searchValue;
		uni.navigateTo({
			url: '/pages/index/search',
			animationType: 'pop-in', // 设置页面切入动画类型
			animationDuration: 200, // 设置页面切入动画持续时间
		})
	}
	const cardturn = (Id, Url) => {
		uni.redirectTo({
			// 补充路由"/pages+'url'"
			url: "/pages",
			animationType: 'pop-in', // 设置页面切入动画类型
			animationDuration: 200, // 设置页面切入动画持续时间
		})
	}

	import {
		useUserStore
	} from '@/store/index.js'
	const useUser = useUserStore()
	//确保进入微信小程序的时候能登录
	const firstLogin = true
	useUser.UserCodeErr = firstLogin

	onShow(() => {
		if (useUser.UserCodeErr) {
			wxLogin()
			useUser.UserCodeErr = null
		}
	})


	//--------------登录PART-----------------
	const useClan = useClanStore()
	import clan from "@/apis/clan.js"
	const wxLogin = () => {
		wx.login({
			success(res) {
				if (res.code) {
					//发起网络请求
					const UserCode = res.code;
					console.log("wxLogin", UserCode)
					wxCodeCheck({
						"code": UserCode
					}).then(res2 => {
						console.log(res2.data, "ss2")
						const ifNew = res2.data.needNew;

						if (ifNew == true) {
							signupturn();
							const openId = res2.data.openid;
							useUser.openId = openId
							console.log(openId, ifNew, "x2")
						} else if (ifNew == false) {
							const userRes = res2.data.user
							useUser.userProfile = userRes
							useUser.UserAccessToken = userRes.accessToken
							console.log(userRes.accessToken, "resToken")
							if (useUser.userProfile.treeId) {
								useClan.clanId = useUser.userProfile.treeId
								clan.getClanMsg(useClan.clanId).then(res => {
									useClan.clanMsg = res.data
									clan.getClanItr(useClan.clanId).then(res => {
										console.log(res.data, "xx")
										if (res.data)
											useClan.clanItr = res.data
									})
								})
							}

							// loginToBc({
							// 	account: userRes.account,
							// 	password: userRes.password
							// }).then(res => {
							// 	console.log(res.data)
							// 	useUser.UserAccessToken = userRes.accessToken
							// })
						}
					}).catch(err => {
						console.log(err, "err")
					})
				} else {
					console.log('登录失败！' + res.errMsg)
				}
			}
		})
	}
	//注册
	const signupturn = () => {
		uni.navigateTo({
			// 补充路由"/pages+'url'"
			url: "../../pages/signUp/signUp",
			animationType: 'pop-in', // 设置页面切入动画类型
			animationDuration: 200, // 设置页面切入动画持续时间
		})
	}
</script>
<style>
	page {
		background-color: #f7c9af;
	}
</style>
<style lang="less">
	.container {
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding-bottom: 24rpx;

		.search-box {
			width: 100vw;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-color: rgb(155, 40, 36);
			padding-bottom: 12rpx;
			border-bottom-left-radius: 14rpx;
			border-bottom-right-radius: 14rpx;

			.title {
				font-size: 50rpx;
				font-weight: 500;
				color: white;
				justify-items: center;
				text-align: center;
				padding-bottom: 20rpx;
			}

			.search_boxer {
				background-color: white;
				display: flex;
				height: 80rpx;
				width: 640rpx;
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				border: 4rpx black solid;

				.icon {
					padding-left: 30rpx;
					padding-right: 30rpx;
				}

				.search_input {
					z-index: 100;
					width: 500rpx;
					height: 80rpx;
					font-size: 30rpx;
				}
			}


		}

		.clanImg {
			width: 90vw;
			height: 300rpx;
			margin-top: 20rpx;
			background-color: rgb(160, 56, 54);
			position: relative;
			// box-shadow: 2rpx 18rpx 12rpx -10rpx rgba(62, 62, 62, 0.7);
			box-shadow: 2rpx 18rpx 3rpx -10rpx rgba(237, 173, 146, 0.7);

			.imgr {
				height: 100%;
				width: 100%;
				background-color: aqua;
			}

			.textr {
				position: absolute;
				width: 100%;
				bottom: 20rpx;
				padding-left: 20rpx;
				font-size: 38rpx;
				font-weight: 900;
				color: white;
				z-index: 12;
			}

			.textr::after {
				content: '';
				position: absolute;
				bottom: -20rpx;
				left: 0;
				width: 100%;
				height: 160%;
				background: rgba(195, 60, 42, 0.3);
				z-index: -1;
				/* 将伪元素放在内容的下方 */

			}
		}

		.CulTitle {
			margin-top: 20rpx;
			font-size: 40rpx;
			font-weight: 900;
			color: rgb(155, 40, 36);
			text-align: center;
		}

		.calnCul {
			.calnInf {
				margin-top: 20rpx;
				height: 450rpx;
				width: 90vw;
				// background-color: rgb(181, 65, 50);
				background: linear-gradient(0deg, #B54132 3%, #FFB07B 100%);
				display: flex;
				justify-content: space-evenly;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				flex-wrap: wrap;

				.calncard {
					margin-top: 20rpx;
					height: 80%;
					width: 27%;
					border-radius: 13px;
					overflow: hidden;
					box-shadow: 0rpx 0rpx 12rpx rgba(237, 153, 104, 0.7);

					s &:hover {
						transition: 300ms all;
						box-shadow: 2rpx 7rpx 12rpx rgba(232, 100, 67, 0.7);

					}

					.cardImg {
						height: 80%;
						width: 100%;
					}

					.cardTitle {
						text-align: center;
						font-weight: 900;
						color: white;
					}
				}
			}
		}

		.Redtravel {
			.redInf {
				position: relative;
				margin-top: 20rpx;
				height: 360rpx;
				width: 90vw;
				box-shadow: 2rpx 18rpx 6rpx -10rpx rgba(216, 127, 91, 0.7);

				.redImg {
					position: absolute;
					height: 100%;
					width: 100%;
					z-index: 0;
				}

				.imgMask {
					z-index: 1;
					height: 100%;
					width: 100%;
					positiheight: 100%;
					width: 100%;
					position: absolute;
					background: linear-gradient(0deg, rgba(121, 0, 0, 0.63) 0%, rgba(255, 239, 238, 0.34) 100%);
				}
			}

			.redText {
				position: absolute;
				bottom: 20rpx;
				left: 42rpx;
				z-index: 2;
				color: white;
				font-family: Arial Black;
				font-size: 32rpx;
			}

			&:hover {
				// Redtravel 的hover
			}
		}
	}
</style>